<!-- static/index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>实时波形显示</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 20px; }
        #chart-container { width: 100%; height: 80vh; }
        .controls { margin: 20px 0; }
    </style>
</head>
<body>
    <h1>实时波形显示器 (16位精度, 1000Hz采样率)</h1>
    
    <div class="controls">
        <button id="startBtn">开始</button>
        <button id="stopBtn">停止</button>
        <span id="status">状态: 未连接</span>
    </div>
    
    <div id="chart-container">
        <canvas id="waveformChart"></canvas>
    </div>

    <script>
        // 初始化Chart.js
        const ctx = document.getElementById('waveformChart').getContext('2d');
        const chart = new Chart(ctx, {
            type: 'line',
            data: {
                datasets: [{
                    label: '波形数据',
                    borderColor: 'rgb(75, 192, 192)',
                    borderWidth: 1,
                    pointRadius: 0,
                    data: []
                }]
            },
            options: {
                responsive: true,
                scales: {
                    x: {
                        type: 'linear',
                        position: 'center',
                        title: { display: true, text: '时间 (ms)' }
                    },
                    y: {
                        min: -32768,
                        max: 32767,
                        title: { display: true, text: '幅值' }
                    }
                },
                animation: {
                    duration: 0
                }
            }
        });

        // WebSocket连接
        let ws;
        let dataBuffer = [];
        const maxPoints = 1000; // 显示1000个点(1秒数据)
        let timeCounter = 0;
        
        // 连接WebSocket
        function connectWebSocket() {
            if (ws) {
                ws.close();
            }
            
            ws = new WebSocket(`ws://${window.location.host}/ws`);
            
            ws.onopen = () => {
                document.getElementById('status').textContent = '状态: 已连接';
                console.log('WebSocket连接已建立');
            };
            
            ws.onclose = () => {
                document.getElementById('status').textContent = '状态: 已断开';
                console.log('WebSocket连接已关闭');
            };
            
            ws.onmessage = (event) => {
                const data = JSON.parse(event.data);
                if (data.type === 'waveform') {
                    // 处理波形数据
                    data.data.forEach(value => {
                        dataBuffer.push({x: timeCounter, y: value});
                        timeCounter += 1; // 1ms间隔
                    });
                    
                    // 保持数据量不超过maxPoints
                    if (dataBuffer.length > maxPoints) {
                        dataBuffer = dataBuffer.slice(dataBuffer.length - maxPoints);
                    }
                    
                    // 更新图表
                    chart.data.datasets[0].data = dataBuffer;
                    chart.update('none');
                }
            };
        }
        
        // 按钮事件
        document.getElementById('startBtn').addEventListener('click', () => {
            connectWebSocket();
        });
        
        document.getElementById('stopBtn').addEventListener('click', () => {
            if (ws) {
                ws.close();
            }
        });
        
        // 页面加载时自动连接
        connectWebSocket();
    </script>
</body>
</html>